var LogCard = function(name, image) {
	var sliderTypes = new Array("Potty", "Mood", "Energy");
	var pottyValues = new Array("Too Little", "A Little", "Normal", "A Lot", "Too Much");
	var moodValues = new Array("Gloomy", "Sad", "Normal", "Happy", "Exstatic");
	var energyValues = new Array("Lethargic", "Tired", "Normal", "Energetic", "Hyper");
	var sliderValues = {
		'Potty' : pottyValues,
		'Mood' : moodValues,
		'Energy' : energyValues
	};
	this.getLogID = function() {
		return this.name.replace(/ /g, "_") + "-" + "log";
	};

	this.getSliderID = function(sliderType) {
		return this.name.replace(/ /g, "_") + "-" + sliderType + "-" + "log";
	};

	this.getCommentID = function() {
		return this.name.replace(/ /g, "_") + "-" + "comment";
	};

	this.name = name;
	this.image = image;
	this.id_div = $('<div></div>');
	this.id_div.addClass('logcard');
	this.id_div.attr({
		'id' : this.getLogID()
	});

	this.id_div.attr('id', this.getLogID(this.name));

	this.getDiv = function() {
		return this.id_div;
	};

	this.createSliderHTML = function(sliderType) {
		return '<div class="d_log">' + '<label for="' + this.getSliderID(sliderType) + '">' + sliderType + ':</label>' + '<div class=slider id="' + this.getSliderID(sliderType) + '"></div></div>';
	};

	this.createSlider = function(sliderSelector, values) {
		var slider = sliderSelector.slider({
			slide : function(event, ui) {
				/* Grab the slider value and set the tooltip's content.text property as it */

				handle.qtip('option', 'content.text', '' + values[ui.value]);

			},
			min : 0,
			max : 4,
			value : 2
		});

		/* Grab and cache the newly created slider handle */
		var handle = $('.ui-slider-handle', slider);

		/*
		 * Selector needs changing here to match your elements.
		 *
		 * Notice the second argument to the $() constructor, which tells
		 * jQuery to use that as the top-level element to seareh down from.
		 */
		handle.qtip({
			content : '' + values[slider.slider('option', 'value')], // Use the current value of the slider
			position : {
				my : 'bottom center',
				at : 'top center',
				container : handle // Stick it inside the handle element so it keeps the position synched up
			},
			hide : {
				delay : 250 // Give it a longer delay so it doesn't hide frequently as we move the handle
			},
			style : {
				classes : 'ui-tooltip-slider',
				widget : true // Make it Themeroller compatible
			}
		}).append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" );
		
		for (var i = 0; i <4 ; i++){
			var tick = $('<div class="tick ui-widget-content"></div>').appendTo(slider);
			tick.css({
				left : (25* (i+1)) + '%',
				width : '25%'
			});
		}
	};
	
	this.createSliders = function() {
		for(var sliderType in sliderValues) {
			this.createSlider($('#' + this.getSliderID(sliderType)), sliderValues[sliderType]);
		}
	};
	//insert html text into div - need to find the best way to do this
	//id will look like ID.html
	var html_text = '<img src= ' + this.image + ' class=picture alt= ' + this.name + ' />' + '<span class=name>' + this.name + '</span>' + '<div class=d_log-wrapper>';

	for(var sliderType in sliderValues) {
		html_text += this.createSliderHTML(sliderType);
	}
	html_text += '</div>' + '<div class=comment>' + '<textarea name=' + this.getCommentID + ' placeholder=Comments></textarea>' + '</div></div>';

	this.id_div.html(html_text);

};
